﻿
<link href="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.loading.js"></script>

<div class="easyui-layout" data-options="fit:true">
    <div id="areaSpider" data-options="region:'north',title:'北边',border:false" style="height:100px;border-bottom-width:1px;">
        大家好，我是蜘蛛侠！
    </div>
    <div id="areaBat" data-options="region:'west',title:'西边',border:false" style="width: 200px;border-right-width:1px;border-bottom-width:1px;">
        我是蝙蝠侠！
    </div>
    <div data-options="region:'center',title:'中间',border:false" style="text-align: center; font-size: 14px; font-weight: bold; padding: 20px; border-bottom-width: 1px;">
        我是曼哈顿博士，我的周围全是战斗力仅4.9的渣渣
        <br />
        现都已被我收服，你想罩哪个货，就点下面的按钮
        <br />
        <br />
        <a id="btnSpider" class="easyui-linkbutton" data-options="iconCls:'icon-spider-man',toggle:true">罩 蜘蛛侠</a>
        <a id="btnBat" class="easyui-linkbutton" data-options="iconCls:'icon-bat-man',toggle:true">罩 蝙蝠侠</a>
        <a id="btnThor" class="easyui-linkbutton" data-options="iconCls:'icon-thor_hammer',toggle:true">罩 锤子侠</a>
        <a id="btnIron" class="easyui-linkbutton" data-options="iconCls:'icon-iron-man',toggle:true">罩 钢铁侠</a>
        <br /><br />
        <a id="btnSolarSystem" class="easyui-linkbutton" data-options="iconCls:'icon-solar_system',toggle:true">毁灭 太阳系</a>
    </div>
    <div id="areaThor" data-options="region:'east',title:'东边',border:false" style="width: 200px; border-left-width: 1px; border-bottom-width: 1px; ">
        我是锤子索尔！
    </div>
    <div id="areaIron" data-options="region:'south',title:'南边',border:false" style="height:100px;">
        大家好，我是钢铁侠！
    </div>
</div>

<script>
    $(function () {
        var array = ["Spider", "Bat", "Thor", "Iron"];
        $.array.forEach(array, function (item) {
            $("#btn" + item).click(function () {
                var lb = $(this), opts = lb.linkbutton("options"), textSpan = lb.find("span.l-btn-text"), area = $("#area" + item);

                if ($.string.contains(opts.text, "罩")) {
                    opts.text = $.string.replaceAll(opts.text, "罩", "掀");
                    $.easyui.loading({ msg: item + " 已被引力波覆盖", locale: area });
                }
                else if ($.string.contains(opts.text, "掀")) {
                    opts.text = $.string.replaceAll(opts.text, "掀", "罩");
                    $.easyui.loaded(area);
                }
                textSpan.removeClass("l-btn-empty").text(opts.text);
            });

        });

        $("#btnSolarSystem").click(function () {
            var lb = $(this), opts = lb.linkbutton("options"), textSpan = lb.find("span.l-btn-text"), area = top.$("#menu-accordion1,#menu-accordion2");
            if ($.string.contains(opts.text, "毁灭")) {
                opts.text = $.string.replaceAll(opts.text, "毁灭", "恢复");
                $.easyui.loading({ msg: "遭受二向箔降维打击", locale: area });
            }
            else if ($.string.contains(opts.text, "恢复")) {
                opts.text = $.string.replaceAll(opts.text, "恢复", "毁灭");
                $.easyui.loaded(area);
            }
            textSpan.removeClass("l-btn-empty").text(opts.text);
        });
    });
</script>
